const e = `
<template>
  <s-form label-width="10em" colon="：">
    <s-form-item label="下拉框主题">
      <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="文本排列方向">
      <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否可筛选">
      <s-radio-group v-model="options.filter" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否多选">
      <s-radio-group v-model="options.multiple" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否可以清除">
      <s-radio-group v-model="options.clearable" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否无边框">
      <s-radio-group v-model="options.borderless" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否存在前缀">
      <s-radio-group v-model="options.prefix" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否只读">
      <s-radio-group v-model="options.readonly" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否禁用">
      <s-radio-group v-model="options.disabled" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="下拉框示例">
      <s-select
        width="24rem"
        v-model="options.value"
        placeholder="请选择辖区"
        :options="list"
        :filter="options.filter"
        :multiple="options.multiple"
        :theme="options.theme"
        :align="options.align"
        :clearable="options.clearable"
        :borderless="options.borderless"
        :readonly="options.readonly"
        :disabled="options.disabled"
      >
        <template v-if="options.prefix" #prefix>
          <span>所属区域</span>
        </template>
      </s-select>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  SELECT_THEME_DEFAULT,
  SELECT_THEME_LABEL,
  SELECT_THEME_OPTIONS,
  TEXT_ALIGN_DEFAULT,
  TEXT_ALIGN_LABEL,
  TEXT_ALIGN_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultSelect extends Vue {
  /**
   * @description: 主题列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = SELECT_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: SELECT_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 排列方向列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly alignList = TEXT_ALIGN_OPTIONS.map((align) => ({
    value: align,
    label: TEXT_ALIGN_LABEL.get(align),
  }));

  /**
   * @description: 是否列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly isOrNotList = [
    { value: true, label: "是" },
    { value: false, label: "否" },
  ];

  // 下拉框选项列表
  readonly list: object[] = [
    { label: "市辖区", value: "320101" },
    { label: "玄武区", value: "320102" },
    { label: "秦淮区", value: "320104", disabled: true },
    { label: "建邺区", value: "320105" },
    { label: "鼓楼区", value: "320106" },
    { label: "浦口区", value: "320111" },
    { label: "栖霞区", value: "320113" },
    { label: "雨花台区", value: "320114" },
    { label: "江宁区", value: "320115" },
    { label: "六合区", value: "320116" },
    { label: "溧水区", value: "320117" },
    { label: "高淳区", value: "320118" },
  ];

  /**
   * @description: 下拉框配置项
   * @private
   * @type {Object}
   */
  options = {
    theme: SELECT_THEME_DEFAULT, // 下拉框主题
    align: TEXT_ALIGN_DEFAULT, // 文本排列方向
    filter: false, // 是否可以筛选
    multiple: false, // 是否多选
    clearable: false, // 是否可以清除
    borderless: false, // 是否无边框
    prefix: false, // 是否存在前缀
    readonly: false, // 是否只读
    disabled: false, // 是否禁用
    value: null, // 下拉框选中值
  };
}
<\/script>
`; export { e as default };
